<template>
  <div class="new-goods">
    <van-grid clickable :column-num="2" :border="hasBorder">
      <van-grid-item
        icon="hot"
        text="热销商品"
        icon-color="#FF3800"
        @click="goList('hot')"
      />
      <van-grid-item
        icon="new"
        text="商品上新"
        icon-color="#1ba784"
        @click="goList('new')"
      />
    </van-grid>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const hasBorder = ref(false)
//
const goList = (type) => {
  console.log(type)
  if (type === 'hot') {
    router.push({ name: 'List', query: { type: 'hot' } })
  } else {
    router.push({ name: 'List', query: { type: 'new' } })
  }
}
</script>

<style lang="less" scoped>
.new-goods {
  padding: 10px 0;
}
</style>
